<template>
    <div class="order-page order-list-page">
        <!--<headBar isBack="show">-->
            <!--<div slot="xm-header-center">-->
                <!--<div class="xm-header-title">我的订单</div>-->
            <!--</div>-->
            <!--<div slot="xm-header-right"></div>-->
        <!--</headBar>-->

        <div class="opt-head">
            <div class="fixedTop nav-head flex flex-pack-center">
                <div class="nav"><span :class="{'active': isStore==1}"  @click="orderChange(1)">待支付</span></div>
                <div class="nav"><span :class="{'active': isStore==3}"  @click="orderChange(3)">待收货</span></div>
                <div class="nav"><span :class="{'active': isStore==0}"  @click="orderChange(0)">全部订单</span></div>
            </div>
        </div>

        <div class="cart-list" v-for="item in order">
            <ul>
                <li>
                    <div class="address">
                        <span  @click="enterStore(item.supplierId)">
                            <i class="icon icon-dianpu5"></i>{{item.supplierName}}<span class="zy" v-show="item.supplierTypeId==1">自营</span>
                            <i class="icon icon-arrowright"></i>
                        </span>
                        <span class="fr status">{{item | orderStatus}}</span>
                    </div>
                    <ol v-for="itemWare in item.purchaseInfo" @click="orderDetail(item.code)">
                        <li class="flex border-bottom">
                            <img :src="itemWare.mainImage">
                            <div class="cart-center flex-1">
                                <h3>{{itemWare.wareName}} </h3>
                                <p class="price">
                                    ￥{{itemWare.pricePiece}} <span>{{itemWare.numberPerBox}}{{itemWare.unitName}}/件</span>
                                </p>
                            </div>
                            <div class="cart-right">
                                <span> ×{{itemWare.number}}</span>
                            </div>
                        </li>
                    </ol>
                    <div class="address border-bottom">
                        <i class="icon icon-dingwei"></i>{{item.addressName}}
                    </div>
                    <div class="compute border-bottom">实付金额：￥<span>{{item.amountPay}}</span></div>
                    <div class="compute">
                        <a class="deleteOrder" v-if="item.statusOrder == 4" @click="deleteOrder(item)">删除订单</a>
                        <a class="deleteOrder" v-if="item.statusOrder == 102 && !item.statusRefund"
                           @click="orderApplyRefund(item)">申请退款</a>
                        <a class="toPay" @click="clickPay(item)"
                           v-if="item.statusOrder == 1 || item.statusOrder == 101">去支付</a>
                        <a class="toPay" @click="receiveSuc(item)" v-if="item.statusOrder==3">确认收货</a>
                    </div>
                </li>
            </ul>
        </div>
        <form action="/panda-app/order/orderPay" method="post" class="hide" ref="form">
            <input type="text" name="code" ref="code">
            <input type="text" value="4" name="payMethodId" ref="payMethodId">
        </form>
        <!--数据为空-->
        <nodata textContent="还没有订单哦" v-show="order.length==0"></nodata>
    </div>
</template>
<script>
    let userName = '';
    export default {
        props: {},
        data() {
            return {
                statusOrder: this.$route.params.type,
                isStore:this.$route.params.type,
                order: []
            };
        },
        methods: {
            //获取订单列表
            getOrderList() {
                getOrderList({statusOrder: this.statusOrder}).then(data => {
                    if (data.returnCode == '000000') {
                        this.order = data.result;
                    }
                })
            },
            orderChange(orderStatus){
                this.statusOrder=orderStatus;
                this.isStore=orderStatus,
                    this.getOrderList();

            },
            /**
             * 点击支付
             * @param <Object> 订单对象
             * */
            clickPay(order) {
                // this.$router.push({name: 'orderPay', params: {orderCode: order.code, money: order.amountTotal }});
                this.$refs.code.value = order.code;
                this.$refs.form.submit();
            },
            /**
             * 订单详情
             * @param <string> 订单id
             * */
            orderDetail(code) {
                this.$router.push({name: 'orderDetail', params: {orderCode: code}});
            },
            /**
             * 展示隐藏采购单列表
             * */
            show(item) {
                this.$set(item, 'isShow', !item.isShow);
            },
            /**
             * 取消订单
             * */
            cancelOrder(item) {
                orderModify({orderCode: item.code, statusOrder: 3}).then(data => {
                    if (data.returnCode == '000000') {
                        this.getOrderList();
                    } else {
                        Toast(data.errorMsg);
                    }
                })
            },
            /**
             * 确定收货
             * @param <object>
             * */
            receiveSuc(item) {
                confirmReceipt({orderSubCode: item.code, statusOrder: 4}).then(data => {
                    if (data.returnCode == '000000') {
                        this.$set(item, 'statusOrder', 4);
                    } else {
                        Toast(data.errorMsg);
                    }
                })
            },
            /**
             * 删除订单
             * @param <object>
             * */
            deleteOrder(item) {
                MessageBox.confirm('确定删除此订单?').then(action => {
                    this.order.splice(this.order.indexOf(item), 1);
                    deleteOrder({code: item.code}).then(data => {
                        if (data.returnCode == '000000') {
                            this.order.splice(this.order.indexOf(item), 1);
                        } else {
                            Toast(data.errorMsg);
                        }
                    })
                });
            },
            /**
             * 退款
             * @param <object> 订单号
             * */
            orderApplyRefund(item) {
                MessageBox.confirm('亲，确定要放弃这个订单吗?').then(action => {
                    orderApplyRefund({code: item.code}).then(data => {
                        if (data.returnCode == '000000') {
                            this.$set(item, 'statusRefund', 1);
                            Toast('退款申请成功');
                        } else {
                            Toast(data.errorMsg);
                        }
                    })
                })
            },
            // 进入商店
            enterStore: function(supplierId){
                this.$router.push({name: 'store', params: {storeId: supplierId}});
            }
        },
        filters: {
            orderStatus(item) {
                let statusRefund = item.statusRefund;
                let type = item.statusOrder;
                if (type == 102 && statusRefund == 1) {
                    return '退款中';
                } else if (type == 9 && statusRefund == 2) {
                    return '已退款';
                } else if (type == 1022 && statusRefund == 3) {
                    return '退款失败';
                } else if (type == 102 && statusRefund == 11) {
                    return '退款中';
                } else if (type == 1) {
                    return '未支付';
                } else if (type == 101) {
                    return '支付中';
                }else if (type == 105) {
                    return '订单异常';
                }  else if (type == 102) {
                    return '待发货';
                } else if (type == 3) {
                    return '待收货';
                } else if (type == 103) {
                    return '已取消';
                } else if (type == 9) {
                    return '已完成';
                } else {
                    return '';
                }
            }
        },
        created() {
            this.getOrderList();
            userName = Cookie.get('userName');
        },
        mounted() {

        },
        components: {}
    };
</script>
<style lang="less" scoped>
    @import "./order.less";

    .order-page {
        .cart-list {
            ul li {
                .address {
                    font-size: .24rem;
                    color: #333333;
                    i {
                        color: #999;
                    }
                    .zy {
                        margin: 0 .24rem 0 .1rem;
                        /*padding: .01rem .05rem;*/
                        /*background: #FF4A4A;*/
                        /*border-radius: 4px;*/
                        /*font-size: .2rem;*/
                        /*color: #fff;*/
                    }
                    .status {
                        color: #999999;
                    }
                }
                .compute {
                    font-size: .24rem;
                    color: #333333;
                    span {
                        font-size: .32rem;
                        color: #151515;
                    }
                    a {
                        display: inline-block;
                        width: 1.32rem;
                        height: .44rem;
                        line-height: .44rem;
                        text-align: center;
                        border: 1px solid #999999;
                        border-radius: 8px;
                        color: #333;
                    }
                    a.toPay {
                        border: 1px solid #FF4A4A;
                        color: #FF4A4A;
                    }
                }
            }
        }
    }

    .order-list-page .order-group {
        margin: 0 .4rem;
    }

    .btn {
        margin-left: .2rem;
        font-size: .24rem;
    }

    .order-list-page .p-money {
        padding-bottom: .2rem;
    }

    .or-left {
        display: inline-block;
        width: 1.8rem;
    }

    .order-page .border-top {
        border-top: 1px solid #cecece;
    }

    .order-page .border-bottom {
        border-bottom: 1px solid #cecece;
    }

    .order-head span {
        white-space: nowrap;
    }

    .span50 {
        width: .5rem;
    }
</style>
